<template>
  <div>
    <el-form :model="formData" inline 
    style="display: flex;justify-content: flex-end;margin-top: 10px;">
      <el-form-item prop='id'>
      <el-input v-model="formData.id" placeholder="请输入品牌商id"></el-input>
      </el-form-item>

      <el-form-item prop='name'>
      <el-input v-model="formData.name" placeholder="请输入品牌商名称"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button @click="search" type="primary">查找</el-button>
        <el-button @click="addDiaog('创建','add', null)" type="primary">添加</el-button>
      </el-form-item>
    </el-form>


    <el-table :v-Loading='facLoading' :data="tableData" border>
      <el-table-column align="center" label="品牌商ID" prop="id"></el-table-column>
      <el-table-column align="center" label='品牌商名称' prop="name"></el-table-column>
      <el-table-column align="center" label="品牌商图片" prop="picUrl"></el-table-column>   
      <el-table-column align="center" label="介绍" prop="desc"></el-table-column>   
      <el-table-column align="center" label="底价" prop="floorPrice"></el-table-column>   

      <el-table-column align="center" label='操作' width="200">
        <template slot-scope="scope">
          <el-button @click="addDiaog('创建','edit',scope.row)" type="pramry">编辑</el-button>
          <el-button @click='deleteFa(scope.row)' type="danger">删除</el-button>
        </template>
      </el-table-column>
   </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>

  <el-dialog 
  :visible.sync='dialogVisible'
  :title="dialogTitle"
  width="500">

  <el-form  ref='dialogForm' :model='dialogFormData' :rules="formRules" label-width="100px">
    <el-form-item label="品牌商名称" prop="name" >
    <el-input v-model="dialogFormData.name"></el-input>
    </el-form-item>

     <el-form-item  label="介绍" prop="desc"  >
    <el-input v-model="dialogFormData.desc"></el-input>
    </el-form-item>
    
     <el-form-item  label="品牌商图片" prop="picUrl" >
    <el-upload
      class="avatar-uploader"
      action= "http://192.168.200.251:8888/admin/storage/create"
      :show-file-list="false"
      :on-success="iconUrlSuccess"
      :headers="{'shopping-admin-token':token}">
      <img v-if="dialogFormData.picUrl" :src='dialogFormData.picUrl' style="width:100px;">
      <i
      v-else
      class="el-icon-plus avatar-uploader-icon"
      style="width:100px;height:100px;border-radius:10px;border:2px dashed #ddd;line-height:100px;">
      </i>
      </el-upload>
    </el-form-item>

     <el-form-item  label="底价" prop="floorPrice" >
    <el-input v-model="dialogFormData.floorPrice"></el-input>
    </el-form-item>
  </el-form>
     <span slot="footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="confirm" type="primary">确 定</el-button>
      </span>
  </el-dialog>

   
  </div>
</template>
  
<script>
import axios from 'axios'
export default {
  name: 'manufacturer',
  componentTitle: '品牌制造商',
  data () {
    return {
       token:sessionStorage.getItem('shopping-admin-token'),
      facLoading:false,
      dialogVisible:false,
       dialogTitle:'创建',
      dialogType:'add',
      tableData:[],
      formData:{
        name:'',
        id:''
      },
      pageInfo:{
        page:1,
        limit:10,
        total:0
      },
      dialogFormData:{
        name:'',
        desc:'',
        picUrl:'',
       floorPrice:''
      },
      formRules:{
        name:[
          {required:true,message:'请输入名称',trigger:'change'}
          
        ],
        desc:[
          {required:true,message:'请输入介绍',trigger:'change'}
        ],
      }
    }
  },
  mounted(){
   this.search()
  },
  methods:{
    //调用数据
    search(){
      this.facLoading=true,
      axios({
        url:'http://192.168.200.251:8888/admin/brand/list',
        method:'get',
        params:{
         page:this.pageInfo.page,
         limit:this.pageInfo.limit,
         ...this.formData
        },
        headers:{'shopping-admin-token':sessionStorage.getItem('shopping-admin-token')}
      }).then(res=>{
        this.facLoading=false,
        this.tableData=res.data.data.list
        this.pageInfo.total=res.data.data.total
      })
    },
    //打开dialog窗口
    addDiaog(title,type,row){
      console.log(row)
      this.dialogVisible=true
      this.dialogType=type
      this.dialogTitle=title
     
     if(type==='edit'){
       this.$nextTick(()=>{
         this.dialogFormData=Object.assign({},row)
       })
     }
    },
    handleSizeChange(value){
       this.pageInfo.limit=value
       this.search()
    },
    handleCurrentChange(value){
      this.pageInfo.page=value
      this.search()
    },
  confirm () {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          if (this.dialogType === 'add') {
            this.addData()
          } else if (this.dialogType === 'edit') {
            this.editData()
          }
        } else {
          return false
        }
      })
      // this.dialogVisible=false
    },
     cancel(){
      this.$refs.dialogForm.resetFields()
      this.dialogVisible=false
    },
    //上传图片成功的回调函数
    iconUrlSuccess(res,file){
      this.dialogFormData.picUrl=res.data.url.replace(/localhost:8888/g,'192.168.200.251:8888')
      
    },
    picUrlSuccess(res,file){
      this.dialogFormData.iconUrl=res.data.url.replace(/localhost:8888/g,'192.168.200.251:8888')
    },
    //添加接口
    addData(){

      axios({
        url: 'http://192.168.200.251:8888/admin/brand/create',
        method:'post',
        data:{
          ...this.dialogFormData
        },
        headers:{'shopping-admin-token':sessionStorage.getItem('shopping-admin-token')}

      }).then(res=>{
       if(res.data.errno === 0){
          this.cancel()
          this.$notify.success({title: '添加成功'})
          this.search()

       }else{
          this.$notify.error({title: '添加失败'})
       }
      })
    },
    //编辑接口
    editData(){
      axios({
        url: 'http://192.168.200.251:8888/admin/brand/update',
        method:'post',
        data:{
          ...this.dialogFormData,
          // addTime: "",
          // deleted: '',
          // id: '',
          // sortOrder: '',
          // updateTime: ""
        },
         headers:{
           'shopping-admin-token':sessionStorage.getItem(
             'shopping-admin-token')}


      }).then(res=>{
        if(res.data.errno===0){
          this.cancel()
          this.$notify.success({title:'编辑成功'})
          this.search()
        }else{
          this.$notify.errno({title:'编辑失败'})
        }
      })
    },
    deleteFa(row){
     this.$confirm('此操作将删除该问题, 是否继续?').then(() => {
      axios({
        url:'http://192.168.200.251:8888/admin/brand/delete',
        method:'post',
        data:row,
         headers: {
            'shopping-admin-token': sessionStorage.getItem('shopping-admin-token')
          }
      }).then(res=>{
        this.$notify.success({title:'删除成功'})
        this.search()
      })
     })
    }
  }
  
}
</script>



